<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="">
    <style>
        *{padding: 0;margin: 0;}
        #box{
            width: 200px;
            height: 200px;
            background-color: #6ff;
            margin: 50px;
            text-align: center;
            line-height: 200px;
        }
    </style>
</head>
<body>  
    <!-- 获取标签内的属性 box.getAttribute("class")  -->
    <!-- 写在标签内 和 标签名以一个空格分隔 叫做属性(属性节点)  id="box" class="one two three" title="hello" -->
    <button class="get">get</button>
    <button class="set">set</button>
    <div class="show">
        <a href="https://www.baidu.com" target="_self"><img src="../images/bg.jpg" alt="1111"></a>
    </div>
</body>

<script>
    var box = document.getElementById("box");

    // 元素节点  => 本质是一个对象(对一个或一类事物特征和行为的描述) => 存在诸多属性和方法

    // 元素节点的属性 =>某些元素特有的
    // href    获取和设置元素的href (a link)
    // target  获取和设置元素的target (a)
    // src     获取和设置元素的src  (img script input:image)
    // alt     获取和设置元素的alt  (img input:image)


    var getBtn = document.getElementsByClassName("get")[0];
    var setBtn = document.getElementsByClassName("set")[0];

    var a = document.getElementsByTagName("a")[0];
    var img = document.getElementsByTagName("img")[0];

    getBtn.onclick = function(){
        console.log(a.href);
        console.log(a.target);
        console.log(img.src);
        console.log(img.alt);
    }

    
    // setBtn.onclick = function(){
    //    a.href = "https://www.jd.com";
    //    a.target = "_blank";
    //    img.src = "../images/bg_4.jpg";
    //    img.alt = "222222";
    // }

    var isSwitch = false;
    setBtn.onclick = function(){
        if(isSwitch){ // 已经切换  => 切回第一套
            a.href = "https://www.baidu.com";
            a.target = "_self";
            img.src = "../images/bg.jpg";
            img.alt = "1111";
            isSwitch = false;
        }else{  //没有切换到第二套  => 切换
            a.href = "https://www.jd.com";
            a.target = "_blank";
            img.src = "../images/bg_4.jpg";
            img.alt = "222222";
            isSwitch = true;
        }
    }










</script>
</html>